/*
 * @Description: 罗列内容
 * @Author: Zzt
 * @Date: 2022-11-17 16:03:36
 * @LastEditTime: 2022-11-17 21:17:12
 */
import { Select } from 'antd';
import classNames from 'classnames/bind';
import { useState } from 'react';
import styles from '../styles/TagData.module.scss';

const cx = classNames.bind(styles);
const TagData = (props: any) => {
  const { title, unit, data } = props;
  const [selectValue, setSelectValue] = useState('tenThousand');
  const options = [
    {
      value: 'tenThousand',
      label: `万${unit}`
    },
    {
      value: 'thousand',
      label: `千${unit}`
    },
    {
      value: 'hundred',
      label: `百${unit}`
    }
  ];
  return (
    <>
      <div className={cx('icon-num')}>
        <div className={cx('data-title')}>
          <div className={cx('text-font')}>{title}</div>
          <div>
            单位：
            <Select
              bordered={false}
              onChange={(val) => setSelectValue(val)}
              defaultValue={'tenThousand'}
              options={options}
            />
          </div>
        </div>
        <div className={cx('data-num')}>
          {data}({options.find((item) => item.value === selectValue).label})
        </div>
      </div>
    </>
  );
};
export default TagData;
